import {type Component, type DefineComponent, type App, watchEffect} from "vue";
import { createApp } from 'vue'
import { useTitle } from "@vueuse/core";
import usePlugins, { router } from "./plugins"
import VueApp from "./App.vue";


export class QuickAdmin {
    private readonly app: App
    constructor () {
        this.app = createApp(VueApp)
        console.log(this.app)
        usePlugins(this.app)
        this.setTitle()
    }

    protected setTitle(){
        watchEffect(()=>{
            let title = router.currentRoute.value.meta?.title || ""
            if (title){
                useTitle(title)
            }
        })
    }

    public component<T extends Component | DefineComponent>(name: string, component?: T)
    {
        if (component){
            this.app.component(name, component)
        }else {
            this.app.component(name)
        }
    }

    public mount(rootContainer: any = '#app'){
        this.app.mount(rootContainer)
    }

    public unmount(){
        this.app.unmount()
    }
}